<script setup>
defineOptions({
  name: 'HomeCategory'
})
import { ArrowRight } from '@element-plus/icons-vue'
import { getCurCateData } from '@/api/category.js'
import { getCarouselImg, getAllClass } from '@/api/home.js'
import { onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
const curCateData = ref([])
const carouselImg = ref([])
const route = useRoute()
const allClass = ref([])
onMounted(async () => {
  const res = await getCurCateData(route.params.id)
  const res1 = await getCarouselImg()
  const res2 = await getAllClass()
  allClass.value = res2.result.filter((item) => item.id === route.params.id)[0]
  carouselImg.value = res1.result
  curCateData.value = res.result
  console.log(curCateData.value)
})
watch(
  () => route.params.id,
  async (newvalue) => {
    const res = await getCurCateData(newvalue)
    const res2 = await getAllClass()
    allClass.value = res2.result.filter(
      (item) => item.id === route.params.id
    )[0]
    console.log(allClass.value)
    curCateData.value = res.result
  }
)
</script>

<template>
  <div class="container py-5">
    <el-breadcrumb class="my-3" :separator-icon="ArrowRight">
      <el-breadcrumb-item to="/home">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{ curCateData.name }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-carousel height="500px">
      <el-carousel-item v-for="value in carouselImg" :key="value.id">
        <img :src="value.imgUrl" alt="" />
      </el-carousel-item>
    </el-carousel>
    <div>
      <div class="bg-white">
        <h2 class="text-secondary text-center py-5">全部分类</h2>
        <div
          class="d-flex justify-content-around align-items-center text-center"
        >
          <div
            v-for="item in allClass.children"
            :key="item.id"
            @click="
              $router.push(
                `/allCategory/${$route.params.id}?cate=${curCateData.name}&sub=${item.name}`
              )
            "
            class="goods"
          >
            <img
              :src="item.picture"
              width="100"
              height="100"
              class="d-block mx-auto"
              alt=""
            />
            <router-link
              :to="`/allCategory/${$route.params.id}?cate=${curCateData.name}&sub=${item.name}`"
              class="text-decoration-none"
            >
              {{ item.name }}
            </router-link>
          </div>
        </div>
      </div>
      <div
        class="bg-white"
        v-for="value in curCateData.children"
        :key="value.id"
      >
        <h2 class="text-secondary text-center py-5">
          {{ value.name }}
        </h2>
        <div class="row border-bottom">
          <goods
            v-for="item in value.goods"
            :key="item.id"
            :item="item"
          ></goods>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.goods {
  cursor: pointer;
  a {
    color: black;
  }
  &:hover a {
    color: #00b81c;
  }
}
</style>
